<template>
    <div class="products">
        <div class="products-header">
            <p class="products-title">五大产品支持</p>
            <p class="products-desc">
                将需求、技术与业务相结合,我们将找到最佳的解决方案
            </p>

            <ul class="products-list">
                <li class="product-item">
                    <div class="header header-1">
                        <div class="header-icon"></div>
                    </div>
                    <div class="content">
                        <p class="content-header">掌上大学APP</p>
                        <p class="content-desc ellipsis-2">开创学生价商城</p>
                    </div>
                </li>

                <li class="product-item">
                    <div class="header header-2">
                        <div class="header-icon"></div>
                    </div>
                    <div class="content">
                        <p class="content-header">大数据系统</p>
                        <p class="content-desc ellipsis-2">
                            全国各大高校的大学生数据分析系统
                        </p>
                    </div>
                </li>

                <li class="product-item">
                    <div class="header header-3">
                        <div class="header-icon"></div>
                    </div>
                    <div class="content">
                        <p class="content-header">全国媒介系统</p>
                        <p class="content-desc ellipsis-2">
                            全国2400所高校媒介资源，行业成本价投放
                        </p>
                    </div>
                </li>

                <li class="product-item">
                    <div class="header header-4">
                        <div class="header-icon"></div>
                    </div>
                    <div class="content">
                        <p class="content-header">工作反馈系统</p>
                        <p class="content-desc ellipsis-2">
                            实时掌握校园代理工作过程、项目进度及时反馈
                        </p>
                    </div>
                </li>

                <li class="product-item">
                    <div class="header header-5">
                        <div class="header-icon"></div>
                    </div>
                    <div class="content">
                        <p class="content-header">校园内参</p>
                        <p class="content-desc ellipsis-2">
                            6年经验沉淀，快速帮助企业缩小打入大学生群体的成本
                        </p>
                    </div>
                </li>

                <li class="product-item"></li>
            </ul>
        </div>

        <div class="product-lists">
            <zsdx-products></zsdx-products>
        </div>
    </div>
</template>

<script>
import zsdxProducts from '@/components/products/zsdx-products'
export default {
    name: 'Products',
    components: {
        zsdxProducts
    },
    data() {
        return {}
    }
}
</script>

<style lang="less" scoped>
.products {
    background: #030e1f;
    min-height: calc(100vh - 0.8rem);
    .products-header {
        .products-title {
            font-size: 0.52rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
            line-height: 0.52rem;
            text-align: center;
            padding-top: 0.56rem;
            padding-bottom: 0.28rem;
        }
        .products-desc {
            font-size: 0.24rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.87);
            line-height: 0.24rem;
            margin-bottom: 0.56rem;
            text-align: center;
        }

        .products-list {
            padding: 0 0.24rem;
            font-size: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .product-item {
                width: 2.26rem;
                height: 2.8rem;
                box-sizing: border-box;
                margin-bottom: 0.12rem;
                .header {
                    height: 1.52rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &.header-1 {
                        background: linear-gradient(
                            135deg,
                            rgba(251, 73, 107, 1) 0%,
                            rgba(245, 35, 57, 1) 100%
                        );
                        .header-icon {
                            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/product_app.png');
                        }
                    }
                    &.header-2 {
                        background: linear-gradient(
                            135deg,
                            rgba(57, 80, 248, 1) 0%,
                            rgba(25, 76, 247, 1) 100%
                        );
                        .header-icon {
                            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/product_data.png');
                        }
                    }
                    &.header-3 {
                        background: linear-gradient(
                            135deg,
                            rgba(140, 87, 247, 1) 0%,
                            rgba(104, 35, 245, 1) 100%
                        );
                        .header-icon {
                            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/product_media.png');
                        }
                    }
                    &.header-4 {
                        background: linear-gradient(
                            135deg,
                            rgba(251, 210, 73, 1) 0%,
                            rgba(245, 166, 35, 1) 100%
                        );
                        .header-icon {
                            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/product_work.png');
                        }
                    }
                    &.header-5 {
                        background: linear-gradient(
                            135deg,
                            rgba(67, 206, 255, 1) 0%,
                            rgba(32, 160, 255, 1) 100%
                        );
                        .header-icon {
                            background-image: url('//cdn.zsdx.cn/zsdx-website/2020mobile/images/product_neican.png');
                        }
                    }
                    .header-icon {
                        width: 1rem;
                        height: 1rem;
                        border-radius: 50%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center center;
                    }
                }
                .content {
                    height: 1.28rem;

                    background: #fff;
                    .content-header {
                        font-size: 0.24rem;
                        font-weight: 400;
                        color: rgba(3, 14, 31, 1);
                        padding-left: 0.12rem;
                        padding-top: 0.16rem;
                        padding-right: 0.12rem;
                    }
                    .content-desc {
                        font-size: 0.2rem;
                        font-weight: 400;
                        color: rgba(96, 105, 114, 1);
                        line-height: 0.28rem;
                        padding-left: 0.12rem;
                        padding-top: 0.08rem;
                        padding-right: 0.12rem;
                    }
                }
            }
        }
    }
}
</style>
